<template>
  <div class="u-editor-content" style="width: 100%">
    <vue-ueditor-wrap
      v-model="content"
      :editor-id="props.id"
      :config="editorConfig"
      :editorDependencies="['ueditor.config.js', 'ueditor.all.js']"
    />
  </div>
</template>
<script lang="ts" setup>
import { VueUeditorWrap } from 'vue-ueditor-wrap';
import { getToken } from '../../utils/authbeifen';
import { computed } from 'vue';
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  // 必须得有，每次引用组件的时候用id去区分
  id: {
    type: String,
    default: '',
  },
});
const emits = defineEmits(['update:modelValue']);
const content = computed({
  get() {
    return props.modelValue || '';
  },

  set(value) {
    emits('update:modelValue', value);
    return value;
  },
});

const editorConfig = {
  // 图片限制最大3M
  imageMaxSize: 3145728,
  // 富文本输入框高度
  initialFrameHeight: 500,
  // 富文本输入框宽度
  initialFrameWidth: '100%',
  // 初始化样式 编辑区自定义样式，如果自定义，最好给 p 标签如下的行高，要不输入中文时，会有跳动感
  initialStyle:
    'body p{line-height:1.8em; margin: 0 ;} h1,h2,h3,h4,blockquote{margin: 0 ;} body table{margin: 0 ;}',
  autoFloatEnabled: false,
  // 获取上传配置路径
  serverUrl: import.meta.env.VITE_APP_UEDITOR_URL,
  // configUrl: props.configUrl,
  // 必须配置域名,否则发版后获取不到页面资源
  UEDITOR_HOME_URL: location.origin + '/UEditorPlus/',
  // 配置请求头token
  serverHeaders: {
    Authorization: `Bearer + ${getToken()}`,
    // 'Token': getToken()
  },
  // 上传图片配置
  imageConfig: {
    // 禁止在线管理
    disableOnline: true,
  },
};
</script>

<style lang="scss" scoped>
.u-editor-content {
  :deep(.edui-default) {
    .edui-editor {
      border-top: none;
    }
  }

  :deep(.edui-editor-toolbarbox) {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1100;
    border-top: 1px solid #eee;
  }

  :deep(body) {
    margin: 0 !important;

    * {
      margin: 0;
    }
  }
}
</style>
